<!DOCTYPE html>
<html class="x-admin-sm">
  
  <head>
    <meta charset="UTF-8">
    <title>角色编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
   <script type="text/javascript" src="./js/index.js"></script>
  </head>
  
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form  id="roleform" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>角色名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="role_name" name="role_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>角色类型
                    </label>
                    <div class="layui-input-inline">
                        <!--<input type="text" id="name" name="name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">-->
                        <select  name="role_type">
                        	<option value="0">用户</option>
                        	<option value="1" id="role_type" >管理</option>
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">
                        拥有权限
                    </label>
                    <table  class="layui-table layui-input-block">
                        <tbody>
                            <tr>
                                <td>
                                    <input id="check" type="checkbox" lay-skin="primary" lay-filter="father" title="全选">
                                </td>
                                <td>
                                    <div class="layui-input-block" id="auth">
                                        
             
                                    </div>
                                </td>
                            </tr>
                          
                        </tbody>
                    </table>
                    <input type="text" style="display: none;" name="authids" />
                    <input type="text" style="display: none;" id="id" name="id" />
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        描述
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="role_desc" name="role_desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" lay-filter="add">保存</button>
              </div>
            </form>
        </div>
    </div>
    <script src="js/jquery.js"></script>
    <script>
    	 	//查询所有的权限信息
    	 	selects();
    	function selects(){
    	
    		$.ajax({
    			type:"get",
    			url:"http://localhost:16111/memurbac/selectonerole",
    			xhrFields:{withCredentials: true},
    			dataType:"json",    			
    			data:{role_id:getUrlVar("roleid")},
    			success:function(res){
    				//表示为查询成功，
    				if(res.code==200){
    			
    					//将权限数据添加到auth列表中
    				//	alert(JSON.stringify(res.data));
    					for(var i=0;i<res.data.auths.length;i++){
    						   
			     var str="<input  class=\"auths\" lay-skin=\"primary\" type=\"checkbox\" title=\""+res.data.auths[i].auth_name+"\" value=\""+res.data.auths[i].id+"\"> "
			              	
		    	
                      $('#auth').html($('#auth').html()+str);
                       
                 }
              
    			 layui.use(['form','layer'], function(){
            $ = layui.jquery;
          var form = layui.form
          ,layer = layui.layer;
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });

          //监听提交
          form.on('submit(add)', function(data){ 
          	
       
          	//定义list 保存 权限id 集合
          	var auths=[];
         
        
         $('.auths').each(function(i,val){
         	if(val.checked==true){
         		auths.push(val.value);
         	}
         	  
         })
         
         
         //将权限数组放置入参数中
          data.field.authids=auths;
         
          
         
       // alert(JSON.stringify(data.field));
         
         
            //发异步，把数据提交给服务器
             		$.ajax({
    			type:"get",
    			url:"http://localhost:16111/memurbac/updrole",
    			xhrFields:{withCredentials: true},
    			dataType:"json",    			
    			data:data.field,
    			success:function(res){
    				//表示为修改角色成功
    			if(res.code==200){
    			    	//提示成功信息
    				
    					 layer.alert(res.data, {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                 parent.selects();
                //关闭当前frame
                parent.layer.close(index);
            });
            
    
    				}else{
    					//提示错误信息
    				
    						 layer.alert(res.error, {icon: 7},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
    					
    				}
    			},
    			error:function(error){
    				//提示错误信息
    			
    								 layer.alert(error, {icon: 2},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
    			}
    				
    		});
           return false;
          });


        form.on('checkbox(father)', function(data){

            if(data.elem.checked){
                $(data.elem).parent().siblings('td').find('input').prop("checked", true);
                form.render(); 
            }else{
               $(data.elem).parent().siblings('td').find('input').prop("checked", false);
                form.render();  
            }
        });
          
          
        });
            
          
          
    					//将角色数据充填到页面中
    				
    					$('#role_name').val(res.data.role.role_name);
    					if(res.data.role.role_type==1){
    							$('#role_type').attr("selected",true);
    					}
    					

        
          
    					for (var k in res.data.role.authids) {
    						
    					
    						for (var j =0 ;j< $('.auths').length;j++){   						 	
    						   
    						   
    					//	console.log($('.auths')[j].value+"=="+res.data.role.authids[k])
         	        if($('.auths')[j].value==res.data.role.authids[k]){
         	        	  $('.auths')[j].checked=true;
         	        	 
         	        	  
         	        }
         	       
               }
    						
    		  }
					
    				   
    	
    			
    			$('#role_desc').val(res.data.role.role_desc);
    			$('#id').val(res.data.role.id);
    					
    		
    					      
    					
    				}else{
    					
    					layui.use("layer", function () {
                //提示错误信息
    					layer.msg(res.error,{icon:7,time:1000});
             })

    					
    				
    				}
    			},
    			error:function(error){
    			
    				layui.use("layer", function (){
             	//提示错误信息
    				layer.msg(JSON.stringify(error),{icon:2,time:1000});
             })
    				
    			}
    				
    		});
   
    	}
       
        

        
           function getUrlVars(){    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

//得到指定参数的value
function getUrlVar(name){
    return getUrlVars()[name];
}
    </script>
  
  </body>

</html>